<template>
	<div style="position: relative;">
		<!-- 第一个 -->
		<div style="
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 20px;
			background-color: #4739DF;
			color: #FFFFFF;"
		>
			{{firstMsg}}
		</div>
		<div style="
			width: 0;
			height: 0;
			border-left: 15px solid #4739DF;
			border-right: 15px solid transparent;
			border-top: 15px solid #4739DF;
			border-bottom: 15px solid transparent;
			position: relative;
			top: -30px;
			left: 100px;"
		>
		</div>
		<!-- 第二个 -->
		<div style="
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			font-size: 20px;
			background-image: repeating-linear-gradient(to Left, #FFFFFF 150%, transparent 300%);
			color: #000000;
			margin-left: 130px;
			position: relative;
			top: -45px;
			left: -40px;"
		>
			{{secondMsg}}
		</div>
		<div style="
			width: 0;
			height: 0;
			border-left: 15px solid transparent;
			border-right: 15px solid #FFFFFF55;
			border-top: 15px solid transparent;
			border-bottom: 15px solid #FFFFFF55;
			position: relative;
			top: -75px;
			left: 60px;"
		>
		</div>
		<div style="
			width: 0;
			height: 0;
			border-left: 22px solid #FFFFFF;
			border-right: 22px solid transparent;
			border-top: 22px solid #FFFFFF;
			border-bottom: 22px solid transparent;
			position: relative;
			top: -105px;
			left: 190px;"
		>
		</div>
		
		<div v-if="bigImg" style="overflow: hidden;height: 160px;">
			<img style="300px;height: 300px;position: absolute; top: 0px;left: 60px" src="../img/yhy.png">
		</div>
		
		<div v-else style="overflow: hidden;">
			<img style="200px;height: 200px;position: absolute; top: -50px;left: 155px" src="../img/yhy.png">
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			firstMsg: String,
			secondMsg: String,
			bigImg: Boolean,
		}
	}
</script>

<style>
</style>
